<template>
  <div
    style="
      height: 100vh;
      min-width: 900px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #0f9876;
    "
  >
    <div style="display: flex; align-items: center; justify-items: center; margin-right: 140px">
      <h2 class="title">软件卓越人才班</h2>
      <br />
      <h2 class="title">报名管理</h2>
    </div>
    <div
      style="
        display: flex;
        background-color: white;
        width: 50%;
        border-radius: 5px;
        overflow: hidden;
      "
    >
      <div style="flex: 1">
        <img src="../../../public/image/login.png" alt="" style="width: 100%" />
      </div>
      <div style="flex: 1; display: flex; align-items: center; justify-content: center">
        <el-form :model="loginInfo" style="width: 80%" :rules="rules" ref="loginRef">
          <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">
            欢迎登录后台管理系统
          </div>
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-user"
              size="default"
              placeholder="请输入账号"
              v-model="loginInfo.username"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              size="default"
              show-password
              placeholder="请输入密码"
              v-model="loginInfo.password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div style="display: flex">
              <el-input
                placeholder="请输入验证码"
                prefix-icon="el-icon-circle-check"
                size="medium"
                style="flex: 1"
                v-model="loginInfo.code"
              ></el-input>
              <div style="flex: 1; height: 36px">
                <valid-code @update:value="getCode" />
<!--                <valid-code />-->
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="dologin">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ValidCode from '@/views/login/ValidCode.vue'
import { login } from '@/apis/login'
import { setToken } from '@/utils/token'
import {ElMessage, type FormRules,} from 'element-plus'
import Router from '@/router'
import { ref } from 'vue'
import { adminStore } from '@/stores/admin'

const adminstore = adminStore()

const code = ref('')
const loginInfo = ref({
  username: '',
  password: '',
  code: ''
})
// 验证码校验
const validateCode = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入验证码'))
  } else if (value.toLowerCase() !== loginInfo.value.code) {
    callback(new Error('验证码错误'))
  } else {
    callback()
  }
}

const loginRef = ref()
const rules = ref<FormRules<typeof loginInfo>>({
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  code: [{ validator: validateCode, trigger: 'blur' }]
})
const getCode = (c: string) => {
  code.value = c.toLowerCase()
}
const dologin = () => {
  loginRef.value.validate((valid: any) => {
    if (valid) {
      if (code.value !== loginInfo.value.code.toLowerCase()){
        ElMessage({ type: 'error', message: '验证码错误' })
        return false
      }
      login(loginInfo.value).then((res) => {
        if (res.data.code === 1) {
          adminstore.adminInfo.username = loginInfo.value.username
          setToken(res.data.data)
          loginInfo.value = {
            username: '',
            password: '',
            code: ''
          }
          ElMessage({ type: 'success', message: '登录成功' })
          Router.replace('/')
        } else {
          ElMessage({ type: 'error', message: res.data.msg })
        }
      })
    } else {
      return false
    }
  })
}
</script>

<style>
.title {
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  font-family: '楷体';
}
</style>
